/*用户新增与修改,作者:高振中,日期:2020-12-20 22:36:10*/
<template>
  <el-dialog :title="title" :visible.sync="show" :close-on-click-modal="false" :close-on-press-escape="false" width="600px">
    <el-form :model="form" ref="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col>
          <el-form-item label="机构" prop="deptName">
            <el-input placeholder="请选择机构" v-model="form.deptName" size="mini" style="width: 400px" />
            <el-button @click="selectNode()" size="mini">...</el-button>
          </el-form-item>
          <el-form-item label="姓名" prop="name"> <el-input placeholder="请输入姓名" v-model="form.name" size="mini" /> </el-form-item>
          <el-form-item label="密码" prop="password"> <el-input placeholder="请输入密码" v-model="form.password" size="mini" /> </el-form-item>
          <el-form-item label="登录名" prop="loginName"> <el-input placeholder="请输入登录名" v-model="form.loginName" size="mini" /> </el-form-item>
          <el-form-item label="头像" prop="avatar">
            <el-upload class="avatar-uploader" action="#" :http-request="uploadFile" :show-file-list="false"> <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar" /> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>
          </el-form-item>
          <el-form-item label="电话" prop="phone"> <el-input placeholder="请输入电话" v-model="form.phone" size="mini" /> </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-select v-model="form.gender" placeholder="请选择性别" size="mini"> <el-option v-for="item in genders" :key="item.value" :label="item.text" :value="item.value"></el-option> </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" placeholder="请选择状态" size="mini"> <el-option v-for="item in status" :key="item.value" :label="item.text" :value="item.value"></el-option> </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="remark"> <el-input type="textarea" placeholder="请输入备注" v-model="form.remark" size="mini" /> </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" style="text-align: right"><el-button @click="show = false" size="mini">取消</el-button> <el-button type="primary" @click="save()" size="mini">确定</el-button></div>
    <DeptTreeSimp ref="deptTree" :setValue="setValue"></DeptTreeSimp>
  </el-dialog>
</template>
<script>
import DeptTreeSimp from "@/views/ref/DeptTreeSimp";
import { getDict } from "@/common/dicts";
export default {
  props: ["loadData"],
  components: { DeptTreeSimp },
  data() {
    return {
      title: "",
      genders: getDict("gender"),
      status: getDict("status"),
      form: this.initForm(),
      dialogMode: "save",
      show: false,
      rules: {
        deptName: [{ required: true, message: "请输入机构ID", trigger: "blur" }],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        loginName: [{ required: true, message: "请输入登录名", trigger: "blur" }],
        phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
      },
    };
  },

  methods: {
    uploadFile(obj) {
      this.rq.post("sys/saveFile", obj.file).then((res) => {
        if (res.code == 200) this.form = { ...this.form, avatarUrl: res.data.fileUrl, avatar: res.data.filePath };
        else this.$message.error(res.msg);
      });
    },
    setValue(node) {
      this.form = { ...this.form, deptName: node.name, deptId: node.id };
    },
    selectNode() {
      this.$refs["deptTree"].showTree();
    },
    //用户-保存
    save() {
      this.$refs["form"].validate((valid) => {
        if (!valid) return;
        this.rq.post("/user/" + this.dialogMode, this.form).then((res) => {
          if (res.code == 200) {
            this.show = false;
            this.$message.success(this.title + "成功!");
            this.loadData();
          } else this.$message.error(res.msg);
        });
      });
    },
    //用户-初始数据
    initForm() {
      return {
        deptName: null, // 机构名称
        userId: null, // 主键
        deptId: null, // 机构ID
        name: null, // 姓名
        password: null, // 密码
        loginName: null, // 登录名
        avatar: null, // 头像
        phone: null, // 电话
        gender: 1, // 性别
        status: 1, // 状态
        avatarUrl: null,
      };
    },
    //用户-新增
    addDialog() {
      this.title = "新增用户";
      this.dialogMode = "save";
      this.form = this.initForm();
      this.show = true;
    },
    //用户-修改
    editDialog(row) {
      this.title = "修改用户";
      this.dialogMode = "update";
      this.form = { ...row };
      this.show = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  line-height: 78px;
  text-align: center;
}
.avatar {
  width: 78px;
  height: 78px;
  display: block;
}
</style>  
